<template>
  <div>
    <div v-for="(item, index) in bannerForm" :key="item.uuid || item.id" :class="$style.wrapper">
      <el-button icon="delete" class="right-top-delete" @click="deleteItem(item)"></el-button>
      <img-upload v-model="bannerForm[index].pic"></img-upload>
      <el-form
        :model="bannerForm[index]"
        ref="bannerForm"
        :class="$style.form"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="链接" prop="link">
          <el-input v-model="bannerForm[index].link"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="bannerForm[index].sort" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <el-button class="long-btn" @click="add">新 增</el-button>
    <hr>
    <el-button type="primary" class="long-btn" @click="save">保 存</el-button>
  </div>
</template>

<script>
import { ImgUpload } from 'components'
import * as apis from 'services/banner'
import { generateUUID } from 'utils'

export default {
  name: 'IndexBanner',
  props: {
    bannerType: {
      type: Number,
      default: 1,
    },
  },
  components: {
    ImgUpload,
  },
  data() {
    return {
      bannerForm: [{
        pic: '',
        sort: '',
        link: '',
        type: this.bannerType,
        uuid: generateUUID(),
      }],
    }
  },
  created() {
    this.getBannerList(this.bannerType)
  },
  methods: {
    async getBannerList(type) {
      const bannerList = await apis.getBannerList(type)
      const list = this.copy(bannerList)
      for (let i = 0, l = list.length; i < l; i += 1) {
        this.$set(this.bannerForm, i, list[i])
      }
    },
    copy(obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    add() {
      this.bannerForm.push({
        pic: '',
        sort: '',
        link: '',
        type: this.bannerType,
        uuid: generateUUID(),
      })
    },
    deleteItem(item) {
      if (this.bannerForm.length === 1) return

      if ({}.hasOwnProperty.call(item, 'uuid')) {
        this.bannerForm = this.bannerForm
          .filter(banner => banner.uuid !== item.uuid)
      } else {
        this.bannerForm = this.bannerForm
          .filter(banner => banner.id !== item.id)
      }
    },
    save() {
      const payload = this.bannerForm
        .map((item) => {
          if ({}.hasOwnProperty.call(item, 'uuid')) {
            delete item.uuid
          }
          return item
        })
      apis.updateBanner(payload)
        .then(() => {
          this.$message({
            type: 'success',
            message: '保存成功!',
          })
          this.getBannerList(this.bannerType)
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '保存失败',
          })
        })
    },
  },
}
</script>

<style module>
.form {
  max-width: 600px;
}

.wrapper {
  position: relative;
  background-color: #F9FAFC;
  padding: 20px;
  margin-bottom: 24px;
}
</style>
